<!--#layout name=printMail-->
<div id="app" class="block-email">
  <div class="email-wrapper-toolbar" v-if="!printing">
    <div class="btn-group pull-left">
      <button class="btn btn-xs blue" @click="onPrint"
        ><i class="fa fa-print"></i>Print</button
      >
    </div>
    <div class="btn-group pull-right">
      <button class="btn btn-xs blue" onclick="javascript:window.close()"
        ><i class="fa fa-close"></i>Close</button
      >
    </div>
  </div>
  <div v-if="currentMail" class="email-wrapper-content">
    <div class="email-wrapper-header">
      <h4 class="title"
        >{{currentMail.subject || '(' + Kooboo.text.mail.noSubject + ')'}}</h4
      >
      <table>
        <tr>
          <th>From</th>
          <td>
            <strong>{{currentMail.from.name}}</strong>
            {{'<' + currentMail.from.address + '>'}}
          </td>
        </tr>
        <tr>
          <th>To</th>
          <td>
            <template v-for="($data,index) in currentMail.to">
              <strong>{{$data.name}}</strong>
              {{'<' + $data.address + '>'}}
              <template v-if="currentMail.to.length - 1 !== index">
                ,
              </template>
            </template>
          </td>
        </tr>
        <tr v-if="currentMail.cc.length">
          <th><span>Cc</span>:</th>
          <td>
            <template v-for="($data,index) in currentMail.cc">
              <strong :key="index">{{$data.name}}</strong>
              {{'<' + $data.address + '>'}}
              <template v-if="currentMail.cc.length - 1 !== index">
                ,
              </template>
            </template>
          </td>
        </tr>
        <tr v-if="currentMail.bcc.length">
          <th><span>Bcc</span>:</th>
          <td v-for="($data,index) in currentMail.bcc">
            <strong :key="index">{{$data.name}}</strong>
            {{'<' + $data.address + '>'}}
            <template v-if="currentMail.bcc.length - 1 !== index">
              ,
            </template>
          </td>
        </tr>
        <tr>
          <th>Date</th>
          <td>
            <strong
              >{{new Date(currentMail.date).toDefaultLangString()}}</strong
            >
          </td>
        </tr>
        <tr v-if="currentMail.attachments.length">
          <th>
            <i class="meta fa fa-paperclip"></i>
            {{currentMail.attachments.length + Kooboo.text.mail.attachments}} :
          </th>
          <td>
            <template v-for="($data,index) in currentMail.attachments">
              <a
                :key="index"
                href="javascript:;"
                @click="downloadAttachment($data)"
                >{{$data.fileName}}</a
              >
              <template v-if="currentMail.attachments.length - 1 !== index">
                ,
              </template>
            </template>
            |
            <strong
              ><a href="" @click="downloadAttachment(null)"
                >Download all</a
              ></strong
            >
          </td>
        </tr>
      </table>
    </div>
    <iframe src="about:blank" class="auto-height"></iframe>
  </div>
</div>

<script>
  var self = new Vue({
    el: "#app",
    data: function() {
      return {
        printing: false,
        currentMail: null
      };
    },
    mounted: function() {
      var self = this;
      var id = Kooboo.getQueryString("id"),
        folder = Kooboo.getQueryString("folder");

      Kooboo.EmailMessage.getContent({
        messageId: id,
        folder: folder
      }).then(function(res) {
        if (res.success) {
          self.currentMail = res.model;
        }
      });
    },
    methods: {
      onPrint: function() {
        self.printing = true;
        self.$nextTick(function() {
          if (!window.print()) {
            self.printing = false;
          }
        });
      },
      downloadAttachment: function(attachment) {
        window.open(
          Kooboo.EmailAttachment.downloadAttachment() +
            "/" +
            self.currentMail.id +
            (attachment ? "/" + attachment.fileName : "")
        );
      },
      adjustIframe: function() {
        $(iframe).removeAttr("style");
        $(iframe).height(iframe.contentWindow.document.body.scrollHeight + 20);
      }
    },
    watch: {
      currentMail: function(mail) {
        if (mail) {
          iframe = $("iframe.auto-height")[0];

          var setHTML = function(code) {
            iframe.contentWindow.document.documentElement.innerHTML = code;
            $("img", iframe.contentWindow.document)
              .load(function() {
                self.adjustIframe();
              })
              .error(function() {
                self.adjustIframe();
              });

            $("a", iframe.contentWindow.document).on("click", function(e) {
              e.preventDefault();
              parent.window.open($(this).attr("href"));
            });

            self.adjustIframe();
          };

          if (!iframe) {
            setTimeout(function() {
              iframe = $("iframe.auto-height")[0];
              setHTML(mail.html);
            }, 300);
          } else {
            setHTML(mail.html);
          }
        }
      }
    }
  });
</script>
